import RoomCard from "@/components/RoomCard";
import { getRoomListService, RoomDataType } from "@/services/api/tenement";
import { useRequest } from "ahooks";
import { Card, Col, Flex, Radio, Row, Space, Spin } from "antd";
import React, { useEffect, useState } from "react";

const Room: React.FC = (props) => {

  const [roomList, setRoomList] = useState<RoomDataType[]>();

  const { run, loading } = useRequest(getRoomListService, {
    manual: true,
    onSuccess(data, params) {
      setRoomList(data.rooms);
    },
  });

  useEffect(() => {
    run("xxx");
  }, []);

  function changeTenment(tenementId: string) {
    run(tenementId);
  }

  return (
    <Space className="fx" direction="vertical" size="large">
      {/* 楼宇选项列表 */}
      <Card>
        <Radio.Group
          defaultValue="a"
          buttonStyle="solid"
          onChange={(e) => changeTenment(e.target.value)}
        >
          <Radio.Button value="a">A1栋写字楼</Radio.Button>
          <Radio.Button value="b">A2栋写字楼</Radio.Button>
          <Radio.Button value="c">B1栋写字楼</Radio.Button>
          <Radio.Button value="d">B2栋写字楼</Radio.Button>
          <Radio.Button value="e">C1栋写字楼</Radio.Button>
          <Radio.Button value="f">C2栋写字楼</Radio.Button>
          <Radio.Button value="g">天汇国际大厦A座</Radio.Button>
          <Radio.Button value="h">时代金融广场</Radio.Button>
        </Radio.Group>
      </Card>
      {/* 房间卡片列表 */}
      {roomList && (
        <Spin spinning={loading}>
          <Row gutter={16}>
            {roomList.map((room) => (
              <Col span={6} key={room.roomNumber}>
                <RoomCard {...room} />
              </Col>
            ))}
          </Row>
        </Spin>
      )}
    </Space>
  );
};

export default Room;
